import React,{ useState,useEffect,useCallback } from 'react'
import img from '../image/快递.png'
import { Button } from '@nutui/nutui-react'
import PaiZhao from './Sxt'
import Captcha from 'react-captcha-code';
import axios from 'axios'


export default function Login2(){
  const [show1,setShow] = useState(false)
  const [show2,setShow2] = useState(false)
  const style = {
    color:'red',
    fontSize:'20px',
    fontWeight:'bold',
  }
  const style2 = {
    color:'black',
    fontSize:'16px',
  }
  const [click1,setClick1] = useState('1')
  const handleClick = () => {
    setClick1('1')
  }
  const handleClick1 = () => {
    setClick1('2')
  }
  const handleClick2 = () =>{
    setShow(true)
  }
  const marginStyle = { margin: 8 }

  const [captcha, setCaptcha] = useState('')

  const handleClick3 = useCallback((captcha) => {
    console.log('captcha:', captcha);
    setCaptcha(captcha);
  }, []);

  const [addform,setaddform] = useState({
    username:'',
    password:''
  })



  const handleChange = (e) => {
    setaddform({
      ...addform,
      username:e.target.value
    })
  }
  const handleChange1 = (e) => {
    setaddform({
      ...addform,
      password:e.target.value
    })
  }
  const handleClick5 = () =>{
    console.log('1111111111111');
    
    axios.post('http://localhost:3500/login',addform).then(res=>{
      if(res.data.code == 200){
        window.location.href = `/app/shou?_id=${res.data.user._id}`
      }
    })
  }

  function handleChange2(e){
    if(e.target.value == captcha){
      setShow2(true)
    }else{
      setShow2(false)
    }
  }

  const [phone,setPhone] = useState('')

  function handlePhone(e){
    if(e.target.value.length == 11){
      // let result = e.target.value + 86
      setPhone(e.target.value)
    }
  }

  const [yzm,setyzm] = useState('')
  const [yzm1,setyzm1] = useState('')
  const [show3,setShow3] = useState('获取验证码')

  function handleYzm(){
    axios.get(`http://localhost:3500/login1?phone=${phone}`).then(res=>{
      if(res.data.code == 200){
        setyzm(res.data.num)
        setShow3('重新获取验证码')
        let time = 60
        let timer = setInterval(()=>{
          time--
          setShow3(time + 's后重新获取')
          if(time == 0){
            clearInterval(timer)
            setShow3('重新获取验证码')
            setShow2(true)
          }
        },1000)
      }
    })
  }

  function handleClick6(){
    if(yzm == yzm1){
      axios.get(`http://localhost:3500/phone?phone=${phone}`).then(res=>{
        if(res.data.code == 200){
          window.location.href = `/app/shou?_id=${res.data.data._id}`
        }
      })
    }
  }

  function handleChange3(e){
    setyzm1(e.target.value)
  }

  const handleClick7 = () =>{
    setShow(false)
  }




  return (
    <div style={{width:'100vw',height:'100vh',backgroundColor:'#f5f5f5',textAlign:'center'}}>
      <img src={img} style={{width:'300px',height:'100px',marginTop:'20px'}} />

      {
          show1 ? <div>
            <PaiZhao />
            <button onClick={handleClick7} style={{marginLeft:'1vw',marginTop:'10px'}}>取消</button>
            </div>  :<div>
        <p style={{display:'flex',justifyContent:'space-around',marginTop:'20px'}}>
          <span style={click1 == '1' ? style:style2} onClick={handleClick}>短信验证码登录</span>
          <span style={click1 == '2' ? style:style2} onClick={handleClick1}>账号密码登录</span>
        </p>
        {
          click1 == '1' ? <div>
            <p><input type='text' style={{width:'80vw',height:"40px",border:'0px',marginTop:'20px',marginLeft:'20px'}} placeholder='请输入手机号' onChange={handlePhone.bind(this)}/><span>+86</span></p>
            <p  style={{marginTop:'20px',display:'flex',justifyContent:'center'}}>
              <input type='text' style={{width:'60vw',height:"40px",border:'0px',marginLeft:'20px'}} placeholder='输入图形中字母获取验证码' onChange={handleChange2.bind(this)}/>
              <div>
                <Captcha charNum={4} onChange={handleClick3}/>
              </div>
            </p>
            <p><input type='text' style={{width:'52vw',height:"40px",border:'0px',marginTop:'20px',marginLeft:'20px'}} placeholder='请输入验证码' onChange={handleChange3.bind(this)}/><span style={{marginRight:'10px'}}>|</span>
            {
              show2 ? <Button fill="none" style={marginStyle} onClick={handleYzm}>
              {show3}
              </Button>: <Button fill="none" style={marginStyle} disabled="true">
              {show3}
            </Button>
            }
            </p>

          </div>:
          <div>
            <p><input type='text' style={{width:'60vw',height:"30px",border:'0px',marginTop:'20px',marginLeft:'20px'}} placeholder='账号/手机号' onChange={handleChange.bind(this)}/></p>
            <p><input type='text' style={{width:'60vw',height:"30px",border:'0px',marginTop:'20px',marginLeft:'20px'}} placeholder='请输入密码' onChange={handleChange1.bind(this)}/>
            </p>
          </div>
        }
        </div>
      }
      <Button block style={{width:'80%',height:'40px',margin:'0 auto',marginTop:'20px'}} onClick={handleClick2}>
        人脸识别登录
      </Button>
      {
        click1 == '1' ?
      <Button block type="primary" style={{width:'80%',height:'40px',margin:'0 auto',marginTop:'20px'}} onClick={handleClick6}>
        登录
      </Button>:
      <Button block type="primary" style={{width:'80%',height:'40px',margin:'0 auto',marginTop:'20px'}} onClick={handleClick5}>
        登录
      </Button>
      }

      <div>

      </div>
    </div>
  )
}
